feat: add user-specific benefit cards to index page (f4fa3475) · Commits · Reproducible Builds / reproducible-website

_data/user-stories.yml

+12 −11

Original line number	Diff line number	Diff line
		cards:
		- emoji: "🔒"
		title: "Security & Trust"
		description: "They let users make sure that software hasn’t been altered, so it’s safe and reliable."
		title: "End User"
		description: "Reproducible Builds ensure that the software you trust is both safe and verifiable. They do this by verifying that the binaries that you download match the original, untampered source code. For security-related tools, this means high confidence that your data and communications are protected against hidden backdoors or vulnerabilities. "
		cta: "When choosing the software for your critical tasks, opt for projects that advertise their builds as reproducible. You can see which technologies are using deterministic builds in our [success stories](https://reproducible-builds.org/success-stories/)"
		- emoji: "💻"
		title: "Transparency in Development"
		description: "They make sure that developers’ code always works the same way, which makes the software more consistent and trustworthy."
		title: "Software Developer"
		description: "Reproducible Builds elevate deterministic builds by making the build process independently verifiable by anyone. This means others can confirm your binaries match the source code exactly, fostering trust, improving debugging, speeding up builds, and demonstrating your commitment to high standards. It also allows the development of extremely concise and easily verifiable patches for any version of your software, eg. for customers that have high security requirements and need to audit every release they make."
		cta: "[The Commandments of Reproducible Builds](https://reproducible-builds.org/docs/commandments/) are a good place to start your journey."
		- emoji: "🛠️"
		title: "Build Infrastructure Protection"
		description: "Attacks on build systems can affect many users. Reproducible builds detect unauthorized changes to the build process early."
		title: "Tech CTO / Project Lead"
		description: "Reproducible Builds add a strong layer of security to your build pipelines, enabling independent audits and ensuring every binary matches the source code. They're a powerful tool for mitigating risks in your software supply chain, simplifying regulatory and license compliance, verifying SBOMs, and aligning your engineering practices with the highest standards. For a CTO, it's an investment in resilience and trust."
		cta: "Read on to learn about [planning to make your builds reproducible](https://reproducible-builds.org/docs/plans/)"
		- emoji: "📜"
		title: "Regulatory Compliance & Licensing"
		description: "They ensure software complies with licenses and industry standards by proving that binaries match their source code."
		- emoji: "🎯"
		title: "Developer Resilience Against Attacks"
		description: "They protect developers from targeted attacks by allowing third-party verification of their software, preventing compromise."
		title: "Tech CEO / Project Owner"
		description: "Reproducible Builds demonstrate your company's commitment to best-in-class processes and trustworthiness by guaranteeing the integrity of your software. Your software is enhanced with verifiable proof of consistency, giving customers confidence that your product is secure and transparent. Your supply chain and your developers are much better protected against a variety of attacks. This positions your company at the leading edge of accountability, setting you apart in competitive markets and building lasting relationships with users and stakeholders. "
		cta: "Find out more about [the high-level benefits of Reproducible Builds](https://reproducible-builds.org/docs/buy-in/)"

assets/styles/components.scss

+75 −0

Original line number	Diff line number	Diff line
		@@ -130,3 +130,78 @@
		background-color: #c3ccd5;
		filter: sepia(1) hue-rotate(180deg);
		}

		.big-cta {
		color: white;
		display: flex;
		align-items: center;
		margin: 0 15px;
		transition: transform 0.25s;
		width: 100%;
		&:hover {
		transform: scale(1.01);
		color: white;
		.point {
		transform: scale(1.1);
		}
		}
		.card-body {
		background-color: $primary;
		display: flex;
		gap: 2em;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		flex-direction: column;
		strong {
		display:block;
		}

		@media (min-width: 576px) {
		flex-direction: row;
		}
		}
		.cta-text {
		flex-shrink: 100;
		}
		.point {
		content: "";
		width: 4em;
		height: 4em;
		border-radius: 50%;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: transform 0.25s;
		&:before {
		content: "";
		display: block;
		background-color: $primary;
		width: 2em;
		height: 2em;
		transform: rotate(45deg);
		margin-left: -0.5em;
		}
		&:after {
		content: "";
		display: block;
		background-color: white;
		width: 1.5em;
		height: 1.5em;
		transform: rotate(45deg);
		position: absolute;
		margin-left: -1.75em;
		}
		}
		}

		@media (min-width: 992px) {
		.offset-boxes {
		padding-bottom: 4em;
		.col-lg-6:nth-child(even) {
		margin-top: 4em;
		margin-bottom: -2.5em !important;
		}
		}
		}
		No newline at end of file

index.md

+17 −0

Original line number	Diff line number	Diff line
		@@ -48,6 +48,23 @@ permalink: /
		</div>
		</div>

		<div class="row justify-content-center">
		<h2 class="text-center mb-5">Reproducible Builds and You</h2>
		<div class="row justify-content-start offset-boxes">
		{% for card in site.data.user-stories.cards %}
		<div class="col-lg-6 col-md-6 col-sm-12 mb-4 d-flex">
		<div class="card h-100 shadow-sm">
		<div class="card-body">
		<h3 class="card-title mt-0">{{ card.title }}</h3>
		<p class="card-text text-left">{{ card.description \| markdownify }}</p>
		<p class="card-text text-left"><strong>{{ card.cta \| markdownify }}</strong></p>
		</div>
		</div>
		</div>
		{% endfor %}
		</div>
		</div>

		<div class="container my-5">
		<div class="row">
		<!-- How section -->