Earthly Lunar Page

website/_data/lunar-features.yml

@@ -0,0 +1,23 @@
+- title: Automated Guardrails
+  description: Enable consistent and safe engineering practices across your entire org through custom guardrails that you define.
+  icon: guardrails.svg
+
+- title: Boost DevOps Maturity
+  description: Reduce reliance on tribal knowledge and guide your teams to DevOps excellence with automatic feedback throughout the development lifecycle.
+  icon: devops.svg
+
+- title: Visibility for Engineering Leaders
+  description: Understand engineering quality with rich insights and drive improvements with custom scorecards tailored to your organizational goals.
+  icon: eye.svg
+
+- title: Eliminate Mass PRs
+  description: Make changes across any number of CI pipelines centrally. No more manual YAML edits and stale PRs that linger forever.
+  icon: mass-merge.svg
+
+- title: Continuous Compliance
+  description: Shift compliance to the left by inserting custom security checks across your projects effortlessly from a central location.
+  icon: continuous-compliance.svg
+
+- title: Ownership Tracking
+  description: Make sense of the diverse components within your product. Track owners and ensure incidents are handled with domain rollups.
+  icon: ownership-tracking.svg

website/_includes/home/v2/header.html

@@ -69,6 +69,7 @@
               <p class="w-[220px] xl:w-[254px] font-bold text-lg xl:text-xl mb-0 mt-0 pb-2 pl-7">Products</p>
 
               <div class="pl-7 pr-8 hover:bg-[#f1fbff]"><a href="/earthly-core" class="border-b py-3 flex items-center text-sm xl:text-base">Earthly</a></div>
+              <div class="pl-7 pr-8 hover:bg-[#f1fbff]"><a href="/earthly-lunar" class="border-b py-3 flex items-center text-sm xl:text-base">Earthly Lunar</a></div>
               <div class="pl-7 pr-8 hover:bg-[#f1fbff]"><a href="/earthly-cloud" class="border-b py-3 flex items-center text-sm xl:text-base">Earthly Cloud</a></div>
               <div class="ml-7 pl-[18px] pr-8 hover:bg-[#f1fbff]"><a href="/earthly-satellites" class="py-3 flex items-center text-sm xl:text-base">Earthly Satellites</a></div>
             </div>

website/_includes/home/v2/mobile-menu.html

@@ -41,6 +41,7 @@
             <div>Products</div>
 
             <a href="/earthly-core" class="border-b pl-4 py-4 flex items-center hover:bg-[#f1fbff]">Earthly</a>
+            <a href="/earthly-lunar" class="border-b pl-4 py-4 flex items-center hover:bg-[#f1fbff]">Earthly Lunar</a>
             <a href="/earthly-cloud" class="border-b pl-4 py-4 flex items-center hover:bg-[#f1fbff]">Earthly Cloud</a>
             <a href="/earthly-satellites" class="ml-4 pl-4 py-4 flex items-center hover:bg-[#f1fbff]">Earthly Satellites</a>
         </div>

website/_includes/lunar/customer-logos.html

@@ -0,0 +1,22 @@
+<img width="103" height="24" src="assets/img/customers/input-output.png" alt="Input/Output" style="width: 103px; height: 24px" />
+<img width="83" height="16" src="assets/img/customers/express-vpn.png" alt="ExpressVPN" style="width: 83px; height: 16px" />
+<img width="38" height="20" src="assets/img/customers/roche.png" alt="Roche" style="width: 38px; height: 20px" />
+<img width="70" height="20" src="assets/img/customers/qualtrics.svg" alt="Qualtrics" style="width: 70px; height: 20px" />
+<img width="94" height="16" src="assets/img/customers/overstock.svg" alt="Overstock" style="width: 94px; height: 16px" />
+<img width="95" height="20" src="assets/img/customers/nabis.svg" alt="Nabis" style="width: 95px; height: 20px" />
+<img width="96" height="16" src="assets/img/customers/bluecore.svg" alt="Bluecore" style="width: 96px; height: 16px" />
+<img width="109" height="20" src="assets/img/customers/market-axess.svg" alt="MarketAxess" style="width: 109px; height: 20px" />
+<img width="59" height="16" src="assets/img/customers/zapier.svg" alt="Zapier" style="width: 59px; height: 16px" />
+<img width="86" height="16" src="assets/img/customers/roblox.svg" alt="Roblox" style="width: 86px; height: 16px" />
+<img width="61" height="16" src="assets/img/customers/adobe.svg" alt="Adobe" style="width: 61px; height: 16px" />
+<img width="47" height="24" src="assets/img/customers/rios.svg" alt="Rios" style="width: 47px; height: 24px" />
+<img width="81" height="24" src="assets/img/customers/vmware.svg" alt="VMware" style="width: 81px; height: 24px" />
+<img width="73" height="20" src="assets/img/customers/posit.svg" alt="Posit" style="width: 73px; height: 20px" />
+<img width="114" height="16" src="assets/img/customers/netscout.svg" alt="Netscout" style="width: 114px; height: 16px" />
+<img width="86" height="24" src="assets/img/customers/deep-genomics.svg" alt="Deep Genomics" style="width: 86px; height: 24px" />
+<img width="73" height="20" src="assets/img/customers/namely.svg" alt="Namely" style="width: 73px; height: 20px" />
+<img width="75" height="20" src="assets/img/customers/hopper.svg" alt="Hopper" style="width: 75px; height: 20px" />
+<img width="32" height="16" src="assets/img/customers/flyr.svg" alt="FLYR" style="width: 32px; height: 16px" />
+<img width="69" height="20" src="assets/img/customers/clipboard-health.svg" alt="ClipboardHealth" style="width: 69px; height: 20px" />
+<img width="41" height="16" src="assets/img/customers/intel.svg" alt="Intel" style="width: 41px; height: 16px" />
+<img width="158" height="20" src="assets/img/customers/the-ai-institute.png" alt="The AI Institute" style="width: 158px; height: 20px" />

website/_includes/lunar/customers.html

@@ -0,0 +1,10 @@
+<div class="customers w-full mt-16 relative">
+  <div class="gradient h-full absolute"></div>
+
+  <div class="logos w-full flex gap-6 lg:gap-12 items-center will-change-transform">
+    {% include lunar/customer-logos.html %}
+    {% include lunar/customer-logos.html %}
+  </div>
+
+  <div class="gradient h-full absolute right-0 rotate-180 top-0"></div>
+</div>

website/_includes/lunar/deployed-in-minutes.html

@@ -0,0 +1,9 @@
+<div class="flex flex-col lg:flex-row gap-10 lg:gap-20 items-center max-w-7xl mt-16 mx-auto px-6 lg:px-10">
+  <div class="flex-1">
+    <h2 class="text-center lg:text-left">Deployed In Minutes</h2>
+
+    <p class="lg:leading-8 lg:mr-2 mt-5 lg:mt-10 text-center lg:text-left text-slate-600 text-lg lg:text-xl">Installing Lunar is as easy as running our agent in your CI/CD runners</p>
+  </div>
+
+  {% svg assets/svg/deployed-in-minutes.svg class="h-auto max-w-full lg:max-w-xl xl:max-w-full" %}
+</div>

website/_includes/lunar/governance-as-code.html

@@ -0,0 +1,76 @@
+<div class="bg-[#E8F7FE] mt-16 pt-16">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;1,600&display=swap" rel="stylesheet" />
+
+  <div class="flex flex-col items-center max-w-7xl mx-auto px-6 lg:px-10">
+    <h2>Governance-As-Code</h2>
+
+    <p class="font-semibold mt-5 text-[#6b7280] text-center lg:text-left text-lg lg:text-2xl">Define custom policies with a few lines of Python</p>
+  </div>
+
+  {% svg assets/svg/governance-as-code.svg class="h-auto max-w-full mx-auto mt-8" %}
+</div>
+
+<script>
+  const getIndicesFromOriginalText = (text, copiedText) => {
+    const textArr = text.split('')
+    const copiedArr = copiedText.split('')
+
+    let startIndex = 0
+    let endIndex = -1
+
+    const checkSubsequentChars = startIndex => {
+      let lineBreaks = 0
+
+      for (let i = 0; i < copiedArr.length; i++) {
+        const currentChar = textArr[startIndex + i + lineBreaks]
+
+        if (
+          !currentChar ||
+          currentChar === copiedArr[i] ||
+          (currentChar === ' ' && new DOMParser().parseFromString(copiedArr[i], 'text/html').body.innerHTML === '&nbsp;')
+        ) {
+          // If the characters match, continue
+          continue
+        } else if (currentChar === '\n') {
+          // If current character is a line break, increase lineBreaks count
+          lineBreaks++
+        } else {
+          // If characters don't match, return new start index
+          return textArr.indexOf(copiedArr[0], startIndex + 1)
+        }
+      }
+
+      // If subsequent characters match, set endIndex
+      endIndex = startIndex + copiedArr.length + lineBreaks
+      return startIndex
+    }
+
+    if (checkSubsequentChars(startIndex)) {
+      while (endIndex === -1) {
+        startIndex = checkSubsequentChars(startIndex)
+      }
+    }
+
+    return { startIndex, endIndex }
+  }
+
+  document.getElementById('code-collectors').addEventListener('copy', e => {
+    const text =
+      'collectors:\n- runBash: lunar collect “hasTests” true\n  hook:\n    type: before-command\n    patterns:\n    - ^go test.*\n    - ^npm test.*\n    - ^python -m .unittest.*'
+
+    const { startIndex, endIndex } = getIndicesFromOriginalText(text, document.getSelection().toString())
+    event.clipboardData.setData('text/plain', text.substring(startIndex, endIndex))
+    event.preventDefault()
+  })
+
+  document.getElementById('code-policies').addEventListener('copy', e => {
+    const text =
+      'policies:\n- name: "Should have unit tests"\n  runPython: |-\n  import lunar\n  hasTests = lunar.get(“hasTests”)\n  lunar.assertTrue(hasTests)'
+
+    const { startIndex, endIndex } = getIndicesFromOriginalText(text, document.getSelection().toString())
+    event.clipboardData.setData('text/plain', text.substring(startIndex, endIndex))
+    event.preventDefault()
+  })
+</script>

website/_includes/lunar/hero.html

@@ -0,0 +1,36 @@
+<div class="hero mt-[70px] overflow-hidden pt-12 lg:pt-3.5 relative">
+  <img class="w-full hidden lg:block absolute" src="assets/svg/clouds.svg" />
+
+  <div class="flex flex-col lg:flex-row gap-10 lg:gap-20 items-center max-w-7xl mx-auto px-6 lg:px-10 relative">
+    <div class="flex-1">
+      <h1 class="font-medium leading-none text-center lg:text-left text-slate-900">
+        Introducing
+        <span class="block pt-4 text-[#2d7e5d] text-5xl sm:text-7xl">Earthly Lunar</span>
+      </h1>
+
+      <p class="lg:leading-8 mt-9 lg:mt-4 text-center lg:text-left text-base lg:text-xl">
+        <span class="font-semibold">Your internal governance platform</span><br />
+        Achieve engineering excellence that is out of this world
+      </p>
+
+      <a
+        class="bg-[#2d7e5d] inline-block mt-9 py-4 rounded-lg text-2xl text-center text-white"
+        href="/contact-us"
+        onclick="lunarGetADemoClick()"
+      >
+        Get a demo
+      </a>
+    </div>
+
+    {% svg assets/svg/lunar.svg class="h-auto max-w-full" %}
+  </div>
+</div>
+
+<script>
+  function lunarGetADemoClick() {
+    analytics.track('lunar-get-a-demo-click', {
+      category: 'Get a demo Click',
+      label: 'lunar-get-a-demo-click'
+    })
+  }
+</script>

website/_includes/lunar/problem-statement.html

@@ -0,0 +1,9 @@
+<div class="bg-[#E8F7FE] pt-16">
+  <div class="flex flex-col items-center max-w-7xl mx-auto px-6 lg:px-10">
+    <h2 class="text-center lg:text-left">Every Service Is A Unique Snowflake</h2>
+
+    <p class="font-semibold mt-5 text-[#6b7280] text-center lg:text-left text-lg lg:text-2xl">Supporting infinitely diverse CI/CD setups is overwhelming</p>
+
+    {% svg assets/svg/lunar-problem-statement.svg class="problem-statement-image h-auto max-w-full" %}
+  </div>
+</div>

website/_includes/lunar/take-control.html

@@ -0,0 +1,15 @@
+<div class="flex flex-col items-center max-w-7xl mt-16 mx-auto px-6 lg:px-10">
+  <h2 class="text-center lg:text-left">Take Control Of The Development Lifecycle</h2>
+
+  {% svg assets/svg/take-control.svg class="h-auto max-w-full mt-8" %}
+
+  <div class="w-full gap-6 lg:gap-12 grid md:grid-cols-2 lg:grid-cols-3 mt-16">
+    {% for item in site.data.lunar-features %}
+      <div class="feature bg-[#f9fafc] border border-[#ededed] pb-6 pt-14 px-6 rounded-3xl shadow">
+        <img width="40" height="40" class="w-10 h-10" src="assets/svg/{{ item.icon }}" alt="{{ item.title }}" />
+        <h3 class="font-semibold mt-2.5 text-[#475569]">{{ item.title }}</h3>
+        <p class="mt-4 text-[#6b7280] text-lg">{{ item.description }}</p>
+      </div>
+    {% endfor %}
+  </div>
+</div>

website/assets/css/lunar.css

@@ -0,0 +1,107 @@
+.hero {
+  background: linear-gradient(180deg, #eef9fe 63.02%, rgba(255, 255, 255, 0) 100%);
+}
+
+.hero h1 {
+  font-size: 36px;
+}
+
+.hero p {
+  color: #616161;
+}
+
+.hero a {
+  width: 100%;
+}
+
+.customers {
+  background-color: #f9fafb;
+}
+
+.customers .gradient {
+  width: 40px;
+  background: linear-gradient(90deg, #f4f4f4 0%, rgba(244, 244, 244, 0) 100%);
+  z-index: 1;
+}
+
+.customers .logos {
+  height: 72px;
+  animation: customers-animation 100s linear infinite;
+}
+
+.customers .logos img {
+  transform: scale(0.9);
+}
+
+h2 {
+  font-size: 30px;
+  letter-spacing: -0.03em;
+  line-height: 40px;
+}
+
+.problem-statement-image {
+  margin: 48px -60px 0;
+  max-width: calc(100% + 120px);
+}
+
+.feature h3 {
+  font-size: 24px;
+  letter-spacing: -0.045em;
+  line-height: 34px;
+}
+
+.feature p {
+  letter-spacing: -0.045em;
+}
+
+@media only screen and (min-width: 640px) {
+  .problem-statement-image {
+    margin: 32px 0 0;
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  .hero h1 {
+    font-size: 56px;
+  }
+
+  .hero a {
+    width: 400px;
+  }
+
+  .customers .gradient {
+    width: 102px;
+  }
+
+  .customers .logos {
+    animation-name: customers-animation-desktop;
+  }
+
+  .customers .logos img {
+    transform: scale(1);
+  }
+
+  h2 {
+    font-size: 40px;
+    line-height: 64px;
+  }
+}
+
+@keyframes customers-animation {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-2271px);
+  }
+}
+
+@keyframes customers-animation-desktop {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-2799px);
+  }
+}