forked from cpswan/sbomify.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
223 lines (201 loc) · 14.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
---
layout: default
title: The SBOM sharing and distribution platform
---
<div>
<div class="hero bg-primaryBG pt-16 lg:pt-24 pb-10">
<div class="max-container flex flex-col text-white px-4 lg:px-[105px]">
<div class="flex flex-col lg:flex-row gap-8 lg:gap-24 mb-16 lg:mb-24">
<h1 class="text-[40px] lg:text-[68px] leading-[48px] lg:leading-[78px] flex-3 font-medium">
<span class="text-gradient">The SBOM hub</span><br />
<span id="rotating-text" class="text-fuschia60"></span>
<script>
// List of words to rotate through
const words = [
'for secure sharing.',
'for easy NTIA compliance.',
'that integrates with your tools.',
'for simple distribution.',
'for Secure by Design.',
'that works in your CI/CD pipeline.',
];
// Get the element where the words will rotate
const rotatingTextElement = document.getElementById('rotating-text');
let currentWordIndex = 0;
// Function to update the text
function updateRotatingText() {
rotatingTextElement.textContent = words[currentWordIndex];
currentWordIndex = (currentWordIndex + 1) % words.length;
}
// Initial text set
updateRotatingText();
// Change the text every 5 seconds
setInterval(updateRotatingText, 5000);
</script> </h1>
<div class="flex-1 mt-3 flex justify-end">
<div>
<a class="btn-secondary mx-auto" href="https://calendly.com/vpetersson/sbomify-consultation">Schedule Consultation</a>
</div>
</div>
</div>
<div class="mb-5">
<video class="rounded-lg w-full" autoplay="" controls="" preload="auto" src="https://pub-363b35f52e4e406b8363a0be7fde4131.r2.dev/sbomify-pitch.mp4"></video>
</div>
<div class="flex flex-col lg:flex-row gap-10 justify-center">
<div class="flex flex-col lg:flex-row h-auto justify-center items-center gap-2 lg:gap-7 border px-6 lg:px-10 py-6 rounded-lg border-solid border-[#37306B] bg-[#201B4C]">
<span class="text-[#8A7DFF]">// Trusted By</span>
<div class="flex items-center gap-10">
<span><img class="w-[135px]" src="/assets/images/site/atsign.svg" alt="atsign logo" /></span>
<span>
<a href="/case-studies/screenly">
<img class="w-[135px]" src="/assets/images/site/screenly.svg" alt="Screenly logo" />
</a>
</span>
</div>
</div>
<div class="flex flex-col lg:flex-row h-auto justify-center items-center gap-2 lg:gap-7 border px-6 lg:px-10 py-6 rounded-lg border-solid border-[#37306B] bg-[#201B4C]">
<span class="text-[#8A7DFF]">> Integrates With</span>
<div class="flex items-center gap-10 h-[50px]">
<span class="flex items-center justify-center h-full">
<a href="/features/integrations/#github">
<img class="w-[135px] max-h-[30px] object-contain" src="/assets/images/site/github.svg" alt="GitHub logo" />
</a>
</span>
<span class="flex items-center justify-center h-full">
<a href="/features/integrations/#gitlab">
<img class="w-[135px] max-h-[30px] object-contain" src="/assets/images/site/gitlab.svg" alt="GitLab logo" />
</a>
</span>
<span class="flex items-center justify-center h-full">
<a href="/features/integrations/#bitbucket">
<img class="w-[135px] max-h-[30px] object-contain" src="/assets/images/site/bitbucket.svg" alt="Bitbucket logo" />
</a>
</span>
<span class="flex items-center justify-center h-full">
<a href="/features/integrations/#docker">
<img class="w-[135px] max-h-[30px] object-contain" src="/assets/images/site/docker.svg" alt="Docker logo" />
</a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="bg-[#F6F9FA]">
<div class="max-container lg:px-[105px] py-12 lg:py-24">
<section class="flex flex-col md:flex-row items-center gap-8 lg:gap-[230px]">
<div class="md:w-1/2 p-4">
<div class="uppercase mb-4">> Why now?</div>
<h2 class="mb-4">The SBOM Mandate</h2>
<p class="mb-4">
With the introduction of <a href="https://www.federalregister.gov/documents/2021/05/17/2021-10460/improving-the-nations-cybersecurity">Executive Order 14028</a>, the US government began mandating SBOMs (Software Bill of Materials) for all vendors selling software to the federal government. This requirement has had a cascading effect throughout the software industry, particularly in compliance. <span id="cra-text">The EU's Cyber Resilience Act (CRA) goes into force in <strong><span id="force-countdown"></span></strong>, with mandatory reporting starting in <strong><span id="reporting-countdown"></span></strong></span>. If your organization hasn't adopted SBOMs yet, the clock is ticking.
</p>
<script>
function formatCountdown(targetDate) {
const now = new Date();
const target = new Date(targetDate);
let months = (target.getFullYear() - now.getFullYear()) * 12;
months += target.getMonth() - now.getMonth();
const daysLeft = Math.ceil((target - now) / (1000 * 60 * 60 * 24));
if (target.getDate() < now.getDate()) {
months--;
}
const years = Math.floor(months / 12);
const remainingMonths = months % 12;
if (months < 0) {
return 'now';
} else if (years === 0 && remainingMonths === 0) {
return `${daysLeft} days`;
} else if (years === 0) {
return `${remainingMonths} months`;
} else if (remainingMonths === 0) {
return `${years} years`;
} else {
return `${years} years, ${remainingMonths} months`;
}
}
function updateCountdowns() {
const dates = {
'force': 'December 10, 2024',
'reporting': 'September 11, 2026'
};
const forceDate = new Date(dates.force);
const now = new Date();
// Update the entire text based on whether the force date has passed
const craTextElement = document.getElementById('cra-text');
if (forceDate < now) {
craTextElement.innerHTML = "The EU's Cyber Resilience Act (CRA) is now in force, with mandatory reporting starting in <strong><span id='reporting-countdown'></span></strong>";
} else {
craTextElement.innerHTML = "The EU's Cyber Resilience Act (CRA) goes into force in <strong><span id='force-countdown'></span></strong>, with mandatory reporting starting in <strong><span id='reporting-countdown'></span></strong>";
}
// Update the countdowns
for (const [key, date] of Object.entries(dates)) {
const element = document.getElementById(`${key}-countdown`);
if (element) {
element.innerHTML = formatCountdown(date);
}
}
}
// Update immediately and then every day
updateCountdowns();
setInterval(updateCountdowns, 1000 * 60 * 60 * 24);
</script>
<a class="button" href="/features/why-now">Learn More</a>
</div>
<div class="md:w-1/2 p-4">
<img src="/assets/images/site/product.webp" alt="sbom management" class="w-full h-auto rounded-lg">
</div>
</section>
<section class="flex flex-col md:flex-row items-center my-8 gap-8 lg:gap-[230px]">
<div class="md:w-1/2 p-4 order-last md:order-first">
<img src="/assets/images/site/components.webp" alt="sbomify innovation" class="w-full h-auto rounded-lg">
</div>
<div class="md:w-1/2 p-4">
<div class="uppercase mb-4">> Generate, Collaborate, and Analyze</div>
<h2 class="mb-4">The SBOM Life Cycle</h2>
<p class="mb-4">
The SBOM life cycle consists of three parts: generation, distribution, and analysis. sbomify focuses on the distribution aspect. SBOMs are typically used by both internal and external stakeholders, such as customers. After speaking with CTOs and CSAs, it became evident that most SBOM distribution today is still done via email, reminiscent of how we used to email software patches in the 90s, which were then stored haphazardly on internal file shares. This approach introduces numerous issues, including unnecessary labor and the risk of working with outdated data. Distribution, also sometimes known as Transport, should be automated and seamlessly integrated into the CI/CD workflow, and this is precisely what sbomify offers.
</p>
<a class="button" href="/features/generate-collaborate-analyze">Learn More</a>
</div>
</section>
<section class="flex flex-col md:flex-row items-center my-8 gap-8 lg:gap-[230px]">
<div class="md:w-1/2 p-4">
<div class="uppercase mb-4">> Hub and spoke</div>
<h2 class="mb-4">The SBOM Hub</h2>
<p class="mb-4">
SBOMs are as fresh as milk — they can change with every CI/CD run, depending on how dependencies (and sub-dependencies!) are managed. This makes it crucial to use a collaborative platform for SBOM management. Enter sbomify. Whether you're a software buyer or producer who is looking to set up an <strong>SBOM vendor portal</strong>, using sbomify will simplify your SBOM process.
</p>
<p class="mb-4">
You can seamlessly invite internal stakeholders to sbomify, allowing them to automatically access the most up-to-date SBOMs for your product, or even specific components for more granular control. These SBOMs can then be easily exported to third-party tools for further analysis, such as security or license audits.
</p>
<a class="button" href="/features/sbom-hub">Learn More</a>
</div>
<div class="md:w-1/2 p-4">
<img src="/assets/images/site/marketplace.svg" alt="sbom due diligence" class="w-full h-auto rounded-lg shadow-lg">
</div>
</section>
<section class="flex flex-col md:flex-row items-center my-8 gap-8 lg:gap-[230px]">
<div class="md:w-1/2 p-4 order-last md:order-first">
<img src="/assets/images/site/sbom-hierarchy.svg" alt="sbomify innovation" class="w-full h-auto rounded-lg shadow-lg">
</div>
<div class="md:w-1/2 p-4">
<div class="uppercase mb-4">> Product, Project and Components</div>
<h2 class="mb-4">SBOMs Done Right</h2>
<p class="mb-4">
Building an SBOM for a simple microservice or dependency file is straightforward. However, this approach is far from representative of your entire product or service. Your backend likely consists of at least a handful of different services, potentially written in various languages and running in separate Docker containers. On top of that, there are probably front-end components that also need to be captured. Creating SBOMs that accurately reflect your entire product or service could result in generating at least a dozen SBOMs. Even with automated tools, sharing all of these with stakeholders can lead to confusion. At sbomify, we’ve addressed this by introducing hierarchical grouping through products, projects, and components.
</p>
<a class="button" href="/features/sbom-hierarchy">Learn More</a>
</div>
</section>
</div>
</div>
<div class="bg-primaryBG">
<div class="max-container text-white px-5 lg:px-[105px] py-12 lg:py-24">
<div class="uppercase text-sm mb-4">
> Blog
</div>
{% include posts.html limit=3 dark=true title="Latest blog posts" %}
</div>
</div>
</div>