Merge pull request #301 from DSACMS/nat/lp

natalialuzuriaga · web-flow · commit 38273960d120 · 2025-05-07T14:44:35.000-07:00
Landing Page: Added new landing page!!!
diff --git a/landing-page/assets/css/styles.css b/landing-page/assets/css/styles.css
diff --git a/landing-page/assets/images/auto-generator.svg b/landing-page/assets/images/auto-generator.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
diff --git a/landing-page/assets/images/cms-white.svg b/landing-page/assets/images/cms-white.svg
@@ -0,0 +1,14 @@
+<svg aria-hidden="true" viewBox="-2 0 88 30" width="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.472 27.532c-4.186-1.961-6.55-4.52-6.416-7.499C4.435 11.69 24.288 3.125 48.254.973 55.465.327 62.247.332 68.199.882 61.36-.108 53.109-.304 44.2.496 20.238 2.649.385 11.21.005 19.556-.18 23.651 4.361 26.953 11.868 29Z"
+    fill="white"
+  />
+  <path
+    d="M8.482 24.888c-1.249-1.247-1.847-2.604-1.782-4.044.35-7.586 18.679-15.361 40.86-17.331 3.395-.302 6.763-.455 10.013-.455 6.063 0 11.744.54 16.431 1.56l.077-.314C69.106 3.026 62.88 2.35 56.078 2.35c-3.221 0-6.56.152-9.926.45-22.069 1.96-40.308 9.777-40.66 17.426-.095 2.097 1.116 3.994 3.598 5.638Z"
+    fill="white"
+  />
+  <path
+    d="M27.806 25.639c-6.273 0-11.313-2.874-11.313-7.163 0-4.31 5.04-7.143 11.313-7.143 2.987 0 5.726.75 7.726 1.936l-2.493 1.75c-1.096-.666-2.767-1.416-4.794-1.416-2.904 0-4.766 1.457-4.766 4.873 0 3.373 1.862 4.83 4.766 4.83 2.027 0 3.698-.707 4.794-1.373l2.493 1.748c-2 1.208-4.74 1.958-7.726 1.958M41.51 16.81v8.392h-4.208V11.77h8.166l5.269 8.08 4.71-8.08h7.19V25.2h-6.521V16.81l-4.85 8.393h-4.237zM73.916 25.639c-4.74 0-7.726-1.583-8.876-2.645l2.548-1.624c1.26.979 3.945 2.124 6.328 2.124 2.109 0 3.15-.375 3.15-1.02 0-1.188-2.492-1.479-5.04-2.02-3.78-.813-6.603-1.812-6.603-4.373 0-3.165 3.863-4.727 8.739-4.727 3.534 0 5.917.687 7.945 2.103l-2.466 1.541c-1.452-1-4-1.541-5.397-1.541-2.246 0-3.123.48-3.123 1.104 0 .978 1.973 1.082 5.123 1.77 3.918.854 6.849 2.061 6.849 4.664 0 2.832-3.48 4.644-9.177 4.644"
+    fill="white"
+  />
+</svg>
diff --git a/landing-page/assets/images/dsacms.svg b/landing-page/assets/images/dsacms.svg
diff --git a/landing-page/assets/images/form-generator.svg b/landing-page/assets/images/form-generator.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
diff --git a/landing-page/assets/images/hhs-white.svg b/landing-page/assets/images/hhs-white.svg
diff --git a/landing-page/assets/images/index-generator.svg b/landing-page/assets/images/index-generator.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
diff --git a/landing-page/assets/images/metrics.svg b/landing-page/assets/images/metrics.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
diff --git a/landing-page/assets/images/repo-scaffolder.svg b/landing-page/assets/images/repo-scaffolder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
diff --git a/landing-page/assets/images/repolinter.svg b/landing-page/assets/images/repolinter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tool"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
diff --git a/landing-page/assets/js/main.js b/landing-page/assets/js/main.js
@@ -0,0 +1,135 @@
+document.addEventListener('DOMContentLoaded', function () {
+
+    // // Federal banner opening functionality
+    // const bannerButton = document.querySelector('.usa-banner__button');
+    // const bannerContent = document.getElementById('gov-banner');
+    // const cmsHeader = document.querySelector('.cms-header');
+    // let bannerExpanded = false;
+
+    // if (bannerButton && bannerContent) {
+    //     bannerContent.style.display = 'none';
+
+    //     bannerButton.addEventListener('click', function () {
+    //         bannerExpanded = !bannerExpanded;
+    //         this.setAttribute('aria-expanded', bannerExpanded);
+
+    //         // hacky but only way i got this to expand and close with the custom banner
+    //         if (bannerExpanded) {
+    //             bannerContent.style.display = 'block';
+    //             if (cmsHeader) {
+    //                 cmsHeader.style.top = bannerContent.offsetHeight + 24 + 'px';
+    //             }
+    //         } else {
+    //             bannerContent.style.display = 'none';
+    //             if (cmsHeader) {
+    //                 cmsHeader.style.top = '24px';
+    //             }
+    //         }
+    //     });
+    // }
+
+    // Mobile menu toggle
+    const menuToggle = document.querySelector('.menu-toggle');
+    const mainMenu = document.getElementById('main-menu');
+
+    if (menuToggle && mainMenu) {
+        menuToggle.addEventListener('click', function () {
+            const expanded = this.getAttribute('aria-expanded') === 'true' || false;
+            this.setAttribute('aria-expanded', !expanded);
+            mainMenu.classList.toggle('show');
+        });
+
+        document.addEventListener('click', function (e) {
+            if (!menuToggle.contains(e.target) && !mainMenu.contains(e.target) && mainMenu.classList.contains('show')) {
+                mainMenu.classList.remove('show');
+                menuToggle.setAttribute('aria-expanded', 'false');
+            }
+        });
+    }
+
+    // Add smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+
+            const target = document.querySelector(this.getAttribute('href'));
+
+            if (target) {
+                // Adjust the scroll position to account for the fixed header
+                const headerHeight = document.querySelector('.cms-header').offsetHeight;
+                const targetPosition = target.getBoundingClientRect().top + window.scrollY;
+                const offsetPosition = targetPosition - headerHeight;
+
+                window.scrollTo({
+                    top: offsetPosition,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+
+    // Keyboard navigation for cards
+    const cards = document.querySelectorAll('.feature-card, .doc-card');
+    cards.forEach(card => {
+        card.setAttribute('tabindex', '0');
+
+        card.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                const link = this.querySelector('a');
+                if (link) {
+                    link.click();
+                }
+            }
+        });
+    });
+
+    // // dynamic nav bar based on scroll position
+    // const sections = document.querySelectorAll('section[id]');
+    // const navItems = document.querySelectorAll('nav ul li a');
+
+    // function setActiveNavItem() {
+    //     const scrollPosition = window.scrollY;
+    //     const headerHeight = document.querySelector('header').offsetHeight;
+    //     const bannerHeight = document.querySelector('.usa-banner').offsetHeight;
+    //     const totalOffset = headerHeight + bannerHeight;
+
+    //     navItems.forEach(item => {
+    //         item.removeAttribute('aria-current');
+    //     });
+
+    //     const documentationSection = document.getElementById('documentation');
+
+    //     if (scrollPosition < (documentationSection.offsetTop - totalOffset - 100)) {
+    //         navItems.forEach(item => {
+    //             if (item.getAttribute('href') === '#hero') {
+    //                 item.setAttribute('aria-current', 'page');
+    //             }
+    //         });
+    //         return;
+    //     }
+    //     let currentSection = null;
+
+    //     sections.forEach(section => {
+    //         if (section.id === 'hero') return;
+
+    //         const sectionTop = section.offsetTop - totalOffset - 100;
+    //         const sectionBottom = sectionTop + section.offsetHeight;
+
+    //         if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
+    //             currentSection = section.id;
+    //         }
+    //     });
+
+    //     if (currentSection) {
+    //         navItems.forEach(item => {
+    //             if (item.getAttribute('href') === '#' + currentSection) {
+    //                 item.setAttribute('aria-current', 'page');
+    //             }
+    //         });
+    //     }
+    // }
+
+    // window.addEventListener('scroll', setActiveNavItem);
+    // setActiveNavItem();
+});
diff --git a/landing-page/assets/js/quizHandler.js b/landing-page/assets/js/quizHandler.js
@@ -0,0 +1,72 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const form = document.querySelector(".usa-form");
+    const formContainer = document.querySelector(".form-container");
+    const resultsContainer = document.querySelector(".results");
+    const tierResult = document.querySelector(".tier-result");
+  
+    if (!form) return;
+  
+    form.addEventListener("submit", function (event) {
+      event.preventDefault();
+  
+      const checkedValues = Array.from(
+        document.querySelectorAll("input[name='tier-determiner']:checked")
+      ).map((input) => input.value);
+  
+      console.log("Selected answers:", checkedValues);
+  
+      // Tier selection logic
+      let tier;
+      let name;
+      if (!checkedValues.includes("contributors")) {
+        tier = "0";
+        name = "Private Repository"
+      } else if (!checkedValues.includes("release")){
+        tier = "0";
+        name = "Private Repository"
+      }
+      else if (!checkedValues.includes("work")){
+        tier = "1";
+        name = "One-Time Release"
+      }
+      else if (!checkedValues.includes("maintain")){
+        tier = "2";
+        name = "Close Collaboration"
+      }
+      else if (!checkedValues.includes("roadmap")){
+        tier = "3";
+        name = "Working in Public"
+      }
+      else {
+        tier = "4";
+        name = "Community Governance"
+      }
+      
+      // Display results
+      formContainer.style.display = "none";
+      resultsContainer.style.display = "block";
+      tierResult.innerHTML = `Your project is: <strong>Tier ${tier} - ${name}</strong><br />
+                              <a href="https://github.com/DSACMS/repo-scaffolder/tree/main/tier${tier}" class="doc-link"">
+                              Learn more about this maturity model tier
+                              <span aria-hidden="true">→</span>
+                              </a>`;
+    });
+  });
+
+  function uncheckAllCheckboxes() {
+    const checkboxes = document.querySelectorAll(".usa-checkbox__input");
+    checkboxes.forEach((checkbox) => {
+      checkbox.checked = false;
+    });
+  }
+
+  function handleClick(event) {
+    const formContainer = document.querySelector(".form-container");
+    const resultsContainer = document.querySelector(".results");
+
+    event.preventDefault();
+    uncheckAllCheckboxes(); // Clear input
+
+    resultsContainer.style.display = "none";
+    formContainer.style.display = "block";
+  }
diff --git a/landing-page/index.html b/landing-page/index.html
