Update SmartLogic Landing Page (#322)

* Added new sections and styling for a new landing page * Added BCHD modal * Added case study modals for World Central Kitchen and Challenge.gov * Added new file with script for case study modals * Fixed button and removed javascript from case study modal HTML files * Extracted css from main into separate files for new components in landing page * Fixed size of logos in the projects section * Changed default modal visibility to 'none' and included modals in the index file * Fixed vertical text alignment in modal button * Cleaned modal styling code * Fixed pictures overlay on World Central Kitchen modal * Changed the code to make the modals responsive * Update index with includes for new partials * Update hero section of landing page * Add statement section to landing page * Add "at a glance" section and get started modal to landing page * Update features section of landing page * Update case study section of the landing page and add modals * Add pillars section to landing page * Update testimonials/awards section to landing page * Add black SL svg logo * Make footer slightly more responsive on mobile * Update header to make the hamburger always visible * Remove old landing page styling * Revert index page to live site * Add overview index * Extract Get Started modal * Add overview default layout * Fix modal descriptions and update image paths * Revert footer for live site * Revert color of logo for live site * Add footer for landing page overview * Revert hero changes and add overview hero * Revert css changes and add overview landing page css styling * Add overview hero css file * Move Get Started modal js to modal.js * Move pillar js * Remove redundant call to modal.js and main.js * JS cleanup --------- Co-authored-by: Micaela Cunha <[email protected]> Co-authored-by: Dan Ivovich <[email protected]>
smartlogic · Aug 30, 2024 · e0c62b0 · e0c62b0
1 parent 0f93f09
commit e0c62b0
Show file tree

Hide file tree

Showing 52 changed files with 1,570 additions and 15 deletions.
diff --git a/_includes/at_a_glance.html b/_includes/at_a_glance.html
@@ -0,0 +1,43 @@
+<section class="section at-a-glance landing-page">
+  <h2 class="at-a-glance__title">SmartLogic At-A-Glance</h2>
+  <div class="at-a-glance__stats">
+    <div class="stat">
+      <h3 class="stat__title">YEARS IN BUSINESS</h3>
+      <p class="stat__value">20+</p>
+    </div>
+    <div class="stat">
+      <h3 class="stat__title">PROJECTS</h3>
+      <p class="stat__value">200+</p>
+    </div>
+    <div class="stat">
+      <h3 class="stat__title">RESOURCE BENCH</h3>
+      <p class="stat__value">25+</p>
+    </div>
+    <div class="stat">
+      <h3 class="stat__title">LOCATION</h3>
+      <p class="stat__value">USA</p>
+    </div>
+  </div>
+  <h2 class="at-a-glance__subtitle">Engagements Include</h2>
+  <div class="at-a-glance__engagements">
+    <div class="engagement full-lifecycle" data-title="Full Lifecycle" data-description="From Product Discovery through all stages of User Experience, Implementation, Maintenance and Continued Innovation.">
+      <p class="engagement__title">Full Lifecycle</p>
+      <div class="engagement__description">From Product Discovery through all stages of User Experience, Implementation, Maintenance and Continued Innovation.</div>
+    </div>
+    <div class="engagement team-augmentation" data-title="Team Augmentation" data-description="Accelerate your projects with a dedicated Scrum Team, offering Project Management, Software Engineering, Design, Development, and QA Services.">
+      <p class="engagement__title">Team Augmentation</p>
+      <div class="engagement__description">Accelerate your projects with a dedicated Scrum Team, offering Project Management, Software Engineering, Design, Development, and QA Services.</div>
+    </div>
+    <div class="engagement replatforming" data-title="Replatforming" data-description="Custom solutions for migrating legacy systems to enhance performance, scalability, and security, keeping your business competitive.">
+      <p class="engagement__title">Replatforming</p>
+      <div class="engagement__description">Custom solutions for migrating legacy systems to enhance performance, scalability, and security, keeping your business competitive.</div>
+    </div>
+    <div class="engagement rd-mvp" data-title="R&D and MVP" data-description="Support early-stage projects with MVP Scoping, Design, and Strategy to help raise funds, prove concepts, or plan roadmaps.">
+      <p class="engagement__title">R&D and MVP</p>
+      <div class="engagement__description">Support early-stage projects with MVP Scoping, Design, and Strategy to help raise funds, prove concepts, or plan roadmaps.</div>
+    </div>
+  </div>
+  <div class="at-a-glance__cta">
+    <a class="btn" href="#" id="openModal">Get Started</a>
+  </div>
+</section>
diff --git a/_includes/bchd_modal.html b/_includes/bchd_modal.html
@@ -0,0 +1,35 @@
+<div class="modal-side-bar"></div>
+<span class="modal-close">
+  <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
+  </svg>
+</span>
+<div class="modal-content">
+  <div class="modal-case-study-details">
+    <div class="modal-sub-container">
+      <img class="modal-logo" src="{{ '/images/logo/logos-featured-clients/bchd.png' | relative_url }}" alt="Baltimore City Health Department Logo" />
+      <h2>Baltimore City Health Department</h2>
+    </div>
+    <div class="modal-sub-container">
+      <p class="overview">The Baltimore City Health Department (BCHD) is the oldest continuously-operating health department in the United States.</p>
+
+      <p>SmartLogic worked on BCHD's CHARMcare platform, an open-source directory that guides users to free or low-cost resources in Baltimore. SmartLogic conducted user research and implemented a number of search and usability improvements to CHARMcare, including integrating Elasticsearch, rank-weighting results, geographic filtering, improved tagging, and file uploads.</p>
+    </div>
+    <div class="modal-sub-container">
+      <h5>Services</h5>
+      <ul>
+        <li>Integrated Elasticsearch to support more complex search ranking while improving performance and speed</li>
+        <li>Conducted user research to help BCHD define the most impactful improvements</li>
+        <li>Built with Ruby on Rails, deployed to Heroku for ease of maintenance</li>        
+      </ul>
+    </div>
+    <div class="button-container">
+      <a href="{{ '/case-studies/bchd' | relative_url }}" class="full-button">
+          View Full Case Study
+      </a>
+    </div>
+  </div>
+  <div class="modal-case-study-details">
+    <img src="{{ '/images/case-studies/bchd/charmcare-home-laptop.png' | relative_url }}" alt="CHARMcare home page on a computer screen"/>
+  </div>
+</div>
diff --git a/_includes/case_studies.html b/_includes/case_studies.html
@@ -0,0 +1,43 @@
+<section class="section case-studies overview-section landing-page">
+  <div class="case-studies__container">
+    <div class="case-studies__samples">
+      <div id="world-central-kitchen" class="samples world-central-kitchen" data-modal="wck-modal" data-description="SmartLogic built a scalable platform for World Central Kitchen's text-to-order food relief program">
+        <div class="title-background"></div>
+        <p class="samples__title">World Central Kitchen</p>
+        <div class="samples__description">SmartLogic built a scalable platform for World Central Kitchen's text-to-order food relief program</div>
+        <svg class="arrow-icon w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"/>
+        </svg>
+      </div>
+
+      <div id="challenge-gov" class="samples challenge" data-modal="challenge-modal" data-description="SmartLogic built a new self-service portal for the Challenge.Gov program">
+        <div class="title-background"></div>
+        <p class="samples__title">Challenge.Gov</p>
+        <div class="samples__description">SmartLogic built a new self-service portal for the Challenge.Gov program</div>
+        <svg class="arrow-icon w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"/>
+        </svg>
+      </div>
+
+      <div id="charmcare" class="samples charmcare" data-modal="bchd-modal" data-description="SmartLogic improved search and usability for Baltimore City Health Department's CHARMcare">
+        <div class="title-background"></div>
+        <p class="samples__title">CHARMcare</p>
+        <div class="samples__description">SmartLogic improved search and usability for Baltimore City Health Department's CHARMcare</div>
+        <svg class="arrow-icon w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"/>
+        </svg>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Case Study Modals -->
+<div id="wck-modal" class="case-study-modal">
+  {% include wck_modal.html %}
+</div>
+<div id="challenge-modal" class="case-study-modal">
+  {% include challenge_modal.html %}
+</div>
+<div id="bchd-modal" class="case-study-modal">
+  {% include bchd_modal.html %}
+</div>
diff --git a/_includes/challenge_modal.html b/_includes/challenge_modal.html
@@ -0,0 +1,43 @@
+<div class="modal-side-bar"></div>
+
+<span class="modal-close">
+  <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
+  </svg>
+</span>
+
+<div class="modal-content">
+  <div class="modal-case-study-details">
+    <div class="modal-sub-container">
+      <img class="modal-logo" src="{{ '/images/logo/challenge.png' | relative_url }}" alt="Challenge.Gov Logo"/>
+      <h2>Challenge.Gov</h2>
+    </div>
+
+    <div class="modal-sub-container">
+      <p class="overview">Challenge.Gov is a GSA-run program that allows any federal agency to engage with the public via challenges and prize competitions.</p>
+
+      <p>The new <underline>open-source</underline> platform built by SmartLogic automates previously manual processes, and integrates with GSA TTS systems like Login.gov, Cloud.gov, and Search.gov.</p>
+
+      <p>The Challenge team is now for the first time able to get visibility into how stakeholders are engaging with the program. Additionally, the new self-serve tools have helped the program's adoption to grow and reach new users.</p>
+    </div>
+
+    <div class="modal-sub-container">
+      <h5>Services</h5>
+      <ul>
+        <li>Elixir/Phoenix, ReactJS, Jekyll</li>
+        <li>Over 7,000 users as of Jan 2022</li>
+        <li>Described by our contact at GSA as "the Army Jeep of applications — it's very simple. It does exactly what you want it to — it's intuitive, clean, simple."</li>
+      </ul>
+    </div>
+
+    <div class="button-container">
+      <a href="{{ '/case-studies/challenge' | relative_url }}" class="full-button">
+        View Full Case Study
+      </a>
+    </div>
+  </div>
+
+  <div class="modal-case-study-details">
+    <img src="{{ '/images/case-studies/challenge/challenge-homepage.png' | relative_url }}" alt="Challenge.gov home page on a computer screen"/>
+  </div>
+</div>
diff --git a/_includes/features.html b/_includes/features.html
@@ -0,0 +1,9 @@
+<section class="section features-container overview-section landing-page">
+  <h2 class="section-title">We are Specialists in</h2>
+    <div class="overview-logo-bar">
+      <img class="features-logo" src="{{ '/images/logo/logos-tech/elixir.png' | relative_url }}" alt="Elixir icon"/>
+      <img class="features-logo" src="{{ '/images/logo/logos-tech/rails.png' | relative_url }}" alt="Ruby on Rails icon"/>
+      <img class="features-logo" src="{{ '/images/logo/logos-tech/flutter.png' | relative_url }}" alt="Flutter icon"/>
+      <img class="features-logo" src="{{ '/images/logo/logos-tech/JS.png' | relative_url }}" alt="JavaScript icon"/>
+    </div>
+</section>
diff --git a/_includes/footer-common.html b/_includes/footer-common.html
@@ -2,7 +2,7 @@
   <div class="container">
     <div class="footer__wrap-col">
       <div class="footer__left">
-        <div class="footer__left-logo"><a href="/"><img src="/images/logo/smartlogic-black.svg" alt="Smartlogic Logo" /></a></div>
+        <div class="footer__left-logo"><a href="/"><img src="/images/logo/smartlogic.svg" alt="Smartlogic Logo" /></a></div>
         <div class="footer__left-text">
           <p>8 Market Pl Ste 377</p>
           <p>Baltimore, MD 21202</p>

diff --git a/_includes/get_started_modal.html b/_includes/get_started_modal.html
@@ -0,0 +1,24 @@
+<!-- Get Started Modal Structure -->
+<div id="modal" class="modal">
+    <span class="close">
+      <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
+      </svg>
+    </span>
+    <div class="modal-content">
+      <iframe
+        id="JotFormIFrame-242406661881055"
+        title="Get Started"
+        onload="window.parent.scrollTo(0,0)"
+        allowtransparency="true"
+        allow="geolocation; microphone; camera; fullscreen"
+        src="https://form.jotform.com/SmartLogic/get-started"
+        frameborder="0"
+        style="min-width:100%;max-width:100%;height:539px;border:none;"
+        scrolling="yes"
+      ></iframe>
+      <script src='https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js'></script>
+      <script>window.jotformEmbedHandler("iframe[id='JotFormIFrame-242406661881055']", "https://form.jotform.com/")</script>
+    </div>
+  </div>
+
diff --git a/_includes/overview-footer.html b/_includes/overview-footer.html
@@ -0,0 +1,62 @@
+<div class="footer__wrap">
+    <div class="container">
+      <div class="footer__wrap-col">
+        <div class="footer__left">
+          <div class="footer__left-logo"><a href="/"><img src="/images/logo/smartlogic-black.svg" alt="Smartlogic Logo" /></a></div>
+          <div class="footer__left-text">
+            <p>8 Market Pl Ste 377</p>
+            <p>Baltimore, MD 21202</p>
+            <p>888-544-SMRT</p>
+          </div>
+        </div>
+        <div class="footer__right">
+          <div class="footer__right-socials">
+            <ul class="footer__right-socials-list">
+              <li class="footer__right-socials-item">
+                <a href="https://twitter.com/smartlogic">
+                  <img src="/images/icons/social-icons/tw.svg" alt="Twiter Icon" />
+                </a>
+              </li>
+              <li class="footer__right-socials-item">
+                <a href="https://www.facebook.com/smartlogic">
+                  <img src="/images/icons/social-icons/fb.svg" alt="Facebook Icon" />
+                </a>
+              </li>
+              <li class="footer__right-socials-item">
+                <a href="https://www.linkedin.com/company/smartlogic-io">
+                  <img src="/images/icons/social-icons/in.svg" alt="Linkedin Icon" />
+                </a>
+              </li>
+              <li class="footer__right-socials-item">
+                <a href="https://github.com/smartlogic">
+                  <img src="/images/icons/social-icons/gh.svg" alt="Github Icon" />
+                </a>
+              </li>
+              <li class="footer__right-socials-item">
+                <a href="https://www.youtube.com/channel/UCWAV0_JasFSJMLGryeUedCQ">
+                  <img src="/images/icons/social-icons/yt.svg" alt="YouTube Icon" />
+                </a>
+              </li>
+              <li class="footer__right-socials-item">
+                <a href="https://www.twitch.tv/smartlogictv">
+                  <img src="/images/icons/social-icons/twitch.svg" alt="Twitch Icon" />
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="footer__right-menu">
+            <ul class="footer__right-menu-list">
+              <li class="footer__right-menu-item"><a href="/about">About Us</a></li>
+              <li class="footer__right-menu-item"><a href="/about/team">Our Team</a></li>
+              <li class="footer__right-menu-item"><a href="/about/community">Community</a></li>
+              <li class="footer__right-menu-item"><a href="https://blog.smartlogic.io/">Blog</a></li>
+              <!-- <li class="footer__right-menu-item"><a target="_blank" href="https://mailchi.mp/smartlogic/signup">Newsletter</a></li> -->
+              <li class="footer__right-menu-item"><a href="/about/privacy.html">Privacy Policy</a></li>
+              <li class="footer__right-menu-item"><a href="/about/jobs">Jobs</a></li>
+
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
diff --git a/_includes/overview_hero.html b/_includes/overview_hero.html
@@ -0,0 +1,23 @@
+<section class="section overview_hero overview_hero__main landing-page">
+  <div class="container">
+    <div class="overview_hero__left">
+      <div class="overview_hero__left-text">
+        <div class="overview_head-text">
+          <h1>
+            Results you can <strong>Trust</strong>.<br>
+            <strong>Collaboration</strong> that lasts.
+          </h1>
+          <h2>Custom web & mobile applications</h2>
+        </div>
+      </div>
+    </div>
+    <div class="overview_hero__right">
+      <div class="overview_hero__right-img">
+        <img src="{{ '/images/contents/header-image.png' | relative_url }}" alt="Woman looking at a smart logic project on here phone.">
+      </div>
+    </div>
+    <div class="overview_hero__cta">
+      <a class="btn" href="#" id="openModal">Get Started</a>
+    </div>
+  </div>
+</section>
diff --git a/_includes/pillars.html b/_includes/pillars.html
@@ -0,0 +1,50 @@
+<section class="section overview-section landing-page">
+  <div class="pillar-card">
+    <div class="pillar-text-content current-card" id="card-1">
+      <h2 class="section-title" id="card-title-1">
+        Expertise:
+        <span id="card-subtitle-1">Unmatched Tech Chops</span>
+      </h2>
+      <p id="card-text-1">Proven by over 200 successful projects and nearly 20 years in the business, our collaborative approach continues to demonstrate technical mastery in a wide array of trusted platforms.</p>
+    </div>
+
+    <div class="pillar-text-content hidden-card" id="card-2">
+      <h2 class="section-title" id="card-title-2">
+        Collaboration:
+        <span id="card-subtitle-2">Understanding Your Goals</span>
+      </h2>
+      <p id="card-text-2">Trust and process are top priorities. We pride ourselves on being a dedicated and trusted partner. Clients have direct access to the developers and our suite of tools & processes to facilitate transparent collaboration and communication.</p>
+    </div>
+
+    <div class="pillar-text-content hidden-card" id="card-3">
+      <h2 class="section-title" id="card-title-3">
+        Empower:
+        <span id="card-subtitle-3">Your Vision Realized</span>
+      </h2>
+      <p id="card-text-3">We partner with you to achieve your goals by managing the lifecycle tailored to your needs, allowing you to concentrate on what you do best, while we handle the rest. Plus, with our steadfast support, your technology evolves with your business.</p>
+    </div>
+
+    <div class="pillar-text-content hidden-card" id="card-4">
+      <h2 class="section-title" id="card-title-4">
+        Prepared:
+        <span id="card-subtitle-4">We're On The Ball</span>
+      </h2>
+      <p id="card-text-4">We come with our research and work product ready to engage and treat each interaction knowing not to waste time. When making the most out of every meeting and review cycle counts, we are ready for business.</p>
+    </div>
+
+    <div class="pillar-arrows">
+      <button type="button" id="back-arrow">
+        <svg xmlns="http://www.w3.org/2000/svg" class="arrow" viewBox="0 0 448 512">
+          <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/>
+        </svg>
+      </button>
+      <button type="button" id="next-arrow">
+        <svg xmlns="http://www.w3.org/2000/svg" class="arrow" viewBox="0 0 448 512">
+          <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</section>
+
+<script src="{{ '/javascript/main.js' | relative_url }}"></script>
diff --git a/_includes/projects.html b/_includes/projects.html
@@ -0,0 +1,16 @@
+<section class="projects-container">
+    <h2 class="section-title">Delivering Mission Critical Projects</h2>
+    <div class="overview-logo-bar">
+        <img class="projects-logo" src="/images/logo/logos-featured-clients/bchd.png" alt="Baltimore City Health Department Logo"/>
+        <img class="projects-logo" src="/images/logo/logos-featured-clients/wck.png" alt="World Central Kitchen Logo"/>
+        <img class="projects-logo" src="/images/logo/challenge.png" alt="Challenge.Gov Logo"/>
+        <img class="projects-logo" src="/images/logo/logos-featured-clients/laureate-universities.png" alt="Laureate International Universitites Logo"/>
+        <img class="projects-logo" src="/images/logo/logos-featured-clients/simplebet.svg" alt="Simplebet Logo"/>
+
+
+        <img class="projects-logo" src="/images/logo/logos-featured-clients/volo.png" alt="Volo Logo"/>
+        <img class="projects-logo" src="/images/logo/logos-featured-clients/stan.png" alt="Stanley Black & Decker Logo"/>
+        <img class="projects-logo" src="/images/logo/logos-featured-clients/jhu.jpg" alt="Johns Hopkins University Logo"/>
+        <img class="projects-logo" src="/images/logo/spotcrime-logo.png" alt="SpotCrime Logo"/>
+    </div>
+</section>