Skip to content

Minor improvements to the formatting and copyright of the landing page #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
perezmlal merged 1 commit into from
Jul 30, 2026
Merged

Minor improvements to the formatting and copyright of the landing page #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>InstantX — Open-source edge broker for real-time data exchange</title>
<meta name="description" content="InstantX is an open-source edge-cloud broker for real-time data exchange. Bridge MQTT, REST, AMQP and Kafka for V2X and beyond — standards-based, self-hostable, built in the open." />
<title>InstantX — Open source edge broker for real-time data exchange</title>
<meta name="description" content="InstantX is an open source edge-cloud broker for real-time data exchange. Bridge MQTT, REST, AMQP and Kafka for V2X and beyond — standards-based, self-hostable, built in the open." />
<link rel="icon" type="image/png" href="/instantx-mark.png" />
<link rel="apple-touch-icon" href="/instantx-mark.png" />
<meta name="theme-color" content="#0d0911" id="metaTheme" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://lf-edge.github.io/instantx/" />
<meta property="og:title" content="InstantX — Open-source edge broker for real-time data exchange" />
<meta property="og:title" content="InstantX — Open source edge broker for real-time data exchange" />
<meta property="og:description" content="Bridge MQTT, REST, AMQP and Kafka and route events by geographic location. A Vodafone Business / STEP project, in collaboration with LF Edge." />
<meta property="og:image" content="https://lf-edge.github.io/instantx/instantx-logo.png" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="InstantX — Open-source edge broker for real-time data exchange" />
<meta name="twitter:title" content="InstantX — Open source edge broker for real-time data exchange" />
<meta name="twitter:description" content="Bridge MQTT, REST, AMQP and Kafka and route events by geographic location. Open source, self-hostable, built in the open." />
<script>
// Set the theme before first paint so the page never flashes the wrong
Expand Down
Binary file added website/src/assets/lfedge-logo-white.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/src/assets/lfedge-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 23 additions & 1 deletion website/src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@

import logoDark from '../assets/instantx-logo-dark.png'
import logoLight from '../assets/instantx-logo.png'
import lfEdgeLogoWhite from '../assets/lfedge-logo-white.png'
import lfEdgeLogoColor from '../assets/lfedge-logo.png'
import { GitHubIcon } from './icons'

function Footer() {
Expand All @@ -32,7 +34,7 @@ function Footer() {
<img className="brand-logo brand-logo--light" src={logoLight} width={780} height={192} alt="" />
</a>
<p>
An open-source edge-cloud broker for real-time data exchange — V2X and beyond. Developed by
An open source edge-cloud broker for real-time data exchange — V2X and beyond. Developed by
Vodafone Business within STEP, in collaboration with LF Edge.
</p>
</div>
Expand Down Expand Up @@ -65,6 +67,17 @@ function Footer() {
<a href="https://github.com/lf-edge/instantx/blob/main/LICENSE.md" target="_blank" rel="noopener">License · MIT + Apache-2.0</a>
</div>
</div>
<div className="footer-lf">
<a className="footer-lf-logo" href="https://lfedge.org/" target="_blank" rel="noopener" aria-label="LF Edge">
<img className="brand-logo brand-logo--dark" src={lfEdgeLogoWhite} width={780} height={192} alt="LF Edge" />
<img className="brand-logo brand-logo--light" src={lfEdgeLogoColor} width={780} height={192} alt="LF Edge" />
</a>
<p>
InstantX is a project of the{' '}
<a href="https://lfedge.org/" target="_blank" rel="noopener">LF Edge</a>. View all{' '}
<a href="https://lfedge.org/our-projects/" target="_blank" rel="noopener">LF Edge projects</a>.
</p>
</div>
<div className="footer-bottom">
<span>© 2026 InstantX contributors · A Vodafone Business / STEP project, in collaboration with LF Edge</span>
<span className="socials">
Expand All @@ -73,6 +86,15 @@ function Footer() {
</a>
</span>
</div>
<div className="footer-legal">
<span>
Copyright © InstantX, a Series of LF Projects, LLC. |{' '}
<a href="https://www.linuxfoundation.org/trademark-usage" target="_blank" rel="noopener">Trademarks</a> |{' '}
<a href="https://www.linuxfoundation.org/privacy" target="_blank" rel="noopener">Privacy</a> |{' '}
<a href="https://www.linuxfoundation.org/terms" target="_blank" rel="noopener">Terms</a> |{' '}
<a href="https://www.linuxfoundation.org/legal/policies" target="_blank" rel="noopener">Policies</a>
</span>
</div>
</div>
</footer>
)
Expand Down
13 changes: 13 additions & 0 deletions website/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@
import { useState } from 'react'
import logoDark from '../assets/instantx-logo-dark.png'
import logoLight from '../assets/instantx-logo.png'
import lfEdgeLogoWhite from '../assets/lfedge-logo-white.png'
import lfEdgeLogoColor from '../assets/lfedge-logo.png'
import { useGitHubStars } from '../hooks/useGitHubStars'
import { useScrollSpy } from '../hooks/useScrollSpy'
import { useTheme } from '../hooks/useTheme'
Expand Down Expand Up @@ -62,6 +64,17 @@ function Header() {
))}
</div>
<div className="nav-right">
<a
className="lf-badge"
href="https://lfedge.org/"
target="_blank"
rel="noopener"
aria-label="A project of LF Edge"
>
<span className="lf-badge-label">A project of</span>
<img className="lf-badge-logo lf-badge-logo--dark" src={lfEdgeLogoWhite} width={780} height={192} alt="LF Edge" />
<img className="lf-badge-logo lf-badge-logo--light" src={lfEdgeLogoColor} width={780} height={192} alt="LF Edge" />
</a>
<button
className="icon-btn"
id="themeBtn"
Expand Down
4 changes: 2 additions & 2 deletions website/src/components/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ function Hero() {
<section className="hero">
<div className="wrap hero-grid">
<div>
<span className="eyebrow">Open-source edge broker</span>
<span className="eyebrow">Open source edge broker</span>
<h1>
Move real-time data <span className="grad">across every protocol</span>, at the edge.
</h1>
<p className="sub">
InstantX is an open-source edge-cloud broker for real-time data exchange. Built for V2X and
InstantX is an open source edge-cloud broker for real-time data exchange. Built for V2X and
beyond, it bridges <strong>MQTT, REST, AMQP and Kafka</strong> and routes events by{' '}
<strong>geographic location</strong> — so road users, infrastructure and backend systems
exchange only what's relevant to their area, safely and in real time.
Expand Down
28 changes: 28 additions & 0 deletions website/src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,18 @@ code,kbd{ font-family:var(--mono); font-size:0.92em; }
font-family:var(--mono); font-size:13.5px; color:var(--muted);
}
.nav-toggle{ display:none; }
.lf-badge{
display:flex; flex-direction:column; align-items:center; gap:3px;
padding:2px 4px; line-height:1;
}
.lf-badge-label{
font-family:var(--mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--faint);
white-space:nowrap;
}
.lf-badge-logo{ height:16px; width:auto; display:block; }
.lf-badge-logo--light{ display:none; } /* dark theme is the default */
:root[data-theme="light"] .lf-badge-logo--dark{ display:none; }
:root[data-theme="light"] .lf-badge-logo--light{ display:block; }

/* =====================================================
Hero
Expand Down Expand Up @@ -348,6 +360,21 @@ a.ccard:hover h3 .arrow{ transform:translate(3px,-3px); color:var(--accent); }
padding-block:22px; border-top:1px solid var(--border); color:var(--faint); font-size:13.5px;
}
.footer-bottom .socials{ display:flex; gap:8px; }
.footer-lf{
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
padding-block:22px; border-top:1px solid var(--border);
}
.footer-lf-logo{ display:flex; flex-shrink:0; }
.footer-lf-logo .brand-logo{ height:30px; }
.footer-lf p{ color:var(--muted); font-size:13.5px; margin:0; }
.footer-lf p a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.footer-lf p a:hover{ color:var(--accent); }
.footer-legal{
padding-block:18px; border-top:1px solid var(--border);
color:var(--faint); font-size:12.5px; text-align:center;
}
.footer-legal a{ color:var(--faint); text-decoration:underline; text-underline-offset:2px; }
.footer-legal a:hover{ color:var(--accent); }

/* =====================================================
Responsive
Expand All @@ -371,6 +398,7 @@ a.ccard:hover h3 .arrow{ transform:translate(3px,-3px); color:var(--accent); }
.nav-links.open a{ padding:12px 14px; }
.nav-toggle{ display:grid; }
.gh-star .gh-count{ display:none; }
.lf-badge{ display:none; }
}
@media (max-width: 600px){
.arch-flow{ grid-template-columns:1fr; }
Expand Down